// 轮播图,点击按钮，图片切换
// 二三张图片先放在右侧框外，当点击右侧按钮时图片从右边进入
// 事件添加：鼠标移入事件imgbox
    // 点击事件
class Banner{
    constructor(ops){
        this.imgbox=ops.imgbox;
        this.aImg=ops.aImg;
        this.left=ops.left;
        this.right=ops.right;
        // console.log(this.imgbox,this.aImg,this.left,this.right)
        this.addEvent();
        this.leave();
        this.move();
        this.index=0;

    }
    
    leave(){
        const that = this;
        this.imgbox.addEventListener("mouseleave",function(){
            that.left.style.display="none";
            that.right.style.display="none";
            that.move();
        })
            
    }
    // 计算索引：
    computedIndex(d){
        if(d ==="right"){
            if(this.index===this.aImg.length-1){
                this.index=0;
                this.pre=this.aImg.length-1;

            }else{
                this.index++;
                this.pre=this.index-1;
            }
        }
        if(d ==="left"){
            if(this.index===0){
                this.index=2;
                this.pre=0;
                
            }else{
                this.index--;
                this.pre=this.index+1;
            }
        }
        // console.log(this.index,this.pre);
        
        this.render();
    }
    move(){
        const that = this;
        this.t=setInterval(function(){
            if(that.index===that.aImg.length-1){
                that.index=0;
                that.pre=that.aImg.length-1;

            }else{
                that.index++;
                that.pre=that.index-1;
            }
            that.render();
        },3000)
    }
    render(){
        this.aImg[this.index].style.display="block";
        this.aImg[this.pre].style.display="none";

    } 
    addEvent(){
        const that = this;
        this.imgbox.addEventListener("mouseenter",function(){
            clearInterval(that.t);
            that.left.style.display="block";
            that.right.style.display="block";
            that.right.onclick=function(){
                that.computedIndex("right");
            }
            that.left.onclick=function(){
                that.computedIndex("left");
            }
        })

    }
}
new Banner({
    imgbox:document.querySelector(".banner-inner .imgbox"),
    aImg:document.querySelectorAll(".banner-inner .imgbox a"),
    left:document.querySelector(".banner-inner .btn-left"),
    right:document.querySelector(".banner-inner .btn-right"),

})

// 头部导航
let aLi=document.querySelectorAll(".nav_right>li")
let aBox=document.querySelectorAll(".nav_right>li>div")
let aI=document.querySelectorAll(".nav_right>li>span>a>i")

function nav(){
    for(let i=0;i<aLi.length;i++){
        aLi[i].t=i;
        if(i===0||i===2||i===4||i===5||i===6||i===8){
            aLi[i].onmouseenter=function(){
                this.style.border="1px solid #dbdada";
                // this.style.border-bottom="none";
                this.style.background="#fff";
                aBox[aLi[i].t].style.display="block";
                this.style.borderBottom="none";
                aBox[aLi[i].t].style.borderTop="none";
                aI[aLi[i].t].className="iconfont icon-jiantouarrow492"
            
            
    
                aLi[ aLi[i].t].onmouseleave=function(){
                this.style.border="none";
                this.style.background="none";
                aBox[aLi[i].t].style.display="none";
                aI[aLi[i].t].className="iconfont icon-ico_arrowdown"
                }
            }
        }
    }

}

// 计算购物车总数量
const goodsMsg =localStorage.getItem("goodsMsg") ? JSON.parse(localStorage.getItem("goodsMsg")) : [];
let num =0;
console.log(goodsMsg)
goodsMsg.forEach((val)=>{
    if(val){
        num+=parseInt(val.num)
       
    }

})
console.log(num)




// 登录守卫
let login_mark = document.querySelector("#login_mark");
let register_mark = document.querySelector("#register_mark");
let span_mark = document.querySelector(".span-r");

function defend(){
    if (localStorage.getItem("isLogin")==="OK"){
        login_mark.innerHTML=`<a href="./personal.html">
        ${localStorage.getItem("username")}
        <i class="iconfont icon-ico_arrowdown"></i>
        </a>`;
        register_mark.innerHTML=`<a href="./index.html">
        退出
        <i></i>
        </a>`;
        register_mark.onclick=function(){
            localStorage.setItem("isLogin","")
        };
        span_mark.innerHTML=num
        span_mark.previousElementSibling.innerHTML=`<a href="./cart.html">购物车</a>`
    
    
        }else{login_mark.innerHTML=`<a href="./login.html">
            请登录
            <i class="iconfont icon-ico_arrowdown"></i>
            </a>`;
            register_mark.innerHTML=`<a href="./register.html">
            注册
            <i></i>
            </a>`;
            span_mark.innerHTML=0
            span_mark.previousElementSibling.innerHTML=`<a href="">购物车</a>`
        }
    nav()


}
defend()
    




